<template lang="pug">
  .page.customer-detail
    Tabs(type="card" :animated="false" @on-click="chooseTab")
      TabPane(label="基本信息" icon="ios-person")
        .stepContent
          step_1(:customerId="customerId")
      TabPane(label="营业执照信息" icon="ios-card")
        .stepContent
          step_2(:customerId="customerId" @preview="preview")
      TabPane(label="费用信息" icon="logo-yen")
        .stepContent
          step_3(:customerId="customerId")
      TabPane(label="合同信息" icon="ios-paper")
        .stepContent
          step_4(:customerId="customerId" @preview="preview")
      TabPane(label="参保信息" icon="ios-paper")
        .stepContent
          step_5(:customerId="customerId")
      TabPane(label="薪资发放与附件管理" icon="ios-camera")
        .stepContent
          step_6(:customerId="customerId" @preview="preview")
    //- .go-back.text-center.mt-10
    //-   Button(type="info" @click="gotoBack") 返回列表
    Modal(v-model="previewModal")
      img(:src="previewImgUrl")
      .text-center(slot="footer")
        Button(type="primary" @click="downFiel") 下载
</template>

<script>
import dataApi from '@/api/data.js'
import step_1 from './detail/CusDtStep_1.vue'
import step_2 from './detail/CusDtStep_2.vue'
import step_3 from './detail/CusDtStep_3.vue'
import step_4 from './detail/CusDtStep_4.vue'
import step_5 from './detail/CusDtStep_5.vue'
import step_6 from './detail/CusDtStep_6.vue'

import { mapMutations } from 'vuex'

export default {
  name: 'CustomerInformationDetail',
  components: {
    step_1,
    step_2,
    step_3,
    step_4,
    step_5,
    step_6
  },
  data () {
    return {
      fielId: '', // 图片id
      fileName: '', // 文件名字
      previewModal: false,
      previewImgUrl: '',

      customerId: '', // 客户id
      detailCurrent: 0, // 当前选项
    }
  },
  created () {
    this.customerId = this.$store.state.user.companyID
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    // 预览图片
    preview (val) {
      this.previewImgUrl = val.url
      this.previewModal = true
      this.fielId = val.id
      this.fileName = val.fileName
    },
    downFiel () {
      dataApi.getDownLoadAttachment({
        id: this.fielId
      }).then(res => {
        console.log(res)
        let blob = new Blob([res.data], { type: 'application/octet-stream' })
        if ('download' in document.createElement('a')) {
          let objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.download = this.fileName
          link.href = objectUrl
          link.click()
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // 切换tab
    chooseTab (index) {
      if (index === this.detailCurrent) return false
      this.isCheck = true
      this.detailCurrent = index
    },
    
    gotoBack () {
      this.closeTag({
        name: 'CustomerInformationDetail'
      })
    }
  }
}
</script>
<style lang="less">
  .customer-detail{
    .ivu-tabs-bar{
      margin-bottom: 0;
    }
    .ivu-poptip-rel{
      width: 100%;
    }
    .ivu-input{
      border-color: #dcdee2;
    }
    .ivu-input[disabled]{
      border-color: rgba(255,255,255,0);
      background-color: #fff;
      color: #333;
      cursor: auto;
      &:hover{
        border-color: rgba(255,255,255,0);
      }
    }
    .ivu-select .ivu-select-selection{
      border-color: #dcdee2;
    }
    .ivu-select-disabled .ivu-select-selection{
      border-color: rgba(255,255,255,0);
      background-color: #fff;
      color: #333;
      cursor: auto;
    }
    .ivu-select-disabled .ivu-select-selection:hover{
      border-color: rgba(255,255,255,0);
    }
    .ivu-select-disabled .ivu-select-selection:hover .ivu-select-arrow{
      display: none;
    }
    .ivu-select-disabled .ivu-select-arrow{
      display: none;
    }
    .ivu-cascader-disabled{
      .ivu-icon-ios-arrow-down:before{
        display: none;
      }
    }
    .dis-datepicker{
      .ivu-input-icon{
        display: none;
      }
    }
    .disabled-cascader{
      .ivu-input[disabled]{
        background-color: #f3f3f3;
        color: #ccc;
        border: 1px solid #dcdee2;
        cursor: not-allowed;
      }
      &.ivu-select-disabled .ivu-select-selection{
        background-color: #f3f3f3;
        color: #ccc;
        border: 1px solid #dcdee2;
        cursor: not-allowed;
      }
    }
    .ivu-select-input[disabled]{
      color: #333;
      -webkit-text-fill-color: #333;
    }
  }
</style>

<style lang="less">
  .steps-click{
    width: 100%;
    height: 66px;
    // background-color: #fff;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    text-indent: -9999px;
    // background: rgba(0, 0, 0, .5);
    .step-item{
      width: 14.2857%;
      // flex: 1;
      cursor: pointer;
    }
  }
  .customer-detail{
    .ivu-tabs-bar{
      margin-bottom: 0;
    }
    // .ivu-tabs-card > .ivu-tabs-content {
    //   min-height: 600px;
    // }
    .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
      min-height: 300px;
      background: #fff;
      padding: 30px 16px 60px;
      // min-height: 500px;
      border: 1px solid #dcdee2;
      border-top: none;
      .stepContent{
        position: relative;
        width: 100%;
        height: 100%;
      }
      .tab-footer{
        position: absolute;
        bottom: -40px;
        right: 0;
      }
    }
  }
  .stepContent{
    position: relative;
  }
  .und-line{
    text-decoration: underline;
    &:hover{
      color: #2d8cf0;
      cursor: pointer;
    }
  }
  .vertical-line{
    width: 1px;
    height: 100%;
    background-color: #999;
    margin-left: 50%;
  }
  .up-item{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .up-label{
      min-width: 130px;
    }
    .up-value{
      margin-right: 15px;
    }
  }
</style>
